<template>
	<!-- 墨单组件 -->
	<view class="MoDan">
		<!-- 每个单子 -->
		<!-- 第1个 -->
		<!-- <view class="box" v-for="item in 5"> -->
		<view class="box" >
			<!-- 头部 -->
			<view class="usrinfo">
				<image class="usrimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQANUPJIT2Kd3PS_J2h4TAe5rQf8mGEcrjzOg&s" mode="aspectFill"></image>
				<view class="usrname">小菜小女孩</view>
			</view>
			<!-- 图片 -->
			<view class="imgbox">
				<image class="img" src="https://p3.itc.cn/q_70/images03/20221114/f76536053c7c4026acfc4cb01a331889.png" mode="aspectFit"></image>
			</view>
			<!-- 描述 -->
			<view class="textbox">
				<view class="text">描述：这个快递体型不大的哪一位好心人帮我拿快递</view>
			</view>
			<!-- 尾部 -->
			<view class="end">
				<view class="money">
					5元
				</view>
				<view class="list" @click="onClick">
					接单
				</view>
			</view>
		</view>
		<!-- 第2个 -->
		<view class="box" >
			<!-- 头部 -->
			<view class="usrinfo">
				<image class="usrimg" src="/common/Otherimages/u4.jpg" mode="aspectFill"></image>
				<view class="usrname">可惜不是你</view>
			</view>
			<!-- 图片 -->
			<view class="imgbox">
				<image class="img" src="/common/Otherimages/c21.jpg" mode="aspectFill"></image>
			</view>
			<!-- 描述 -->
			<view class="textbox">
				<view class="text">描述：有无人机大哥帮我送送快递吗~</view>
			</view>
			<!-- 尾部 -->
			<view class="end">
				<view class="money">
					15元
				</view>
				<view class="list" @click="onClick">
					接单
				</view>
			</view>
		</view>
		<!-- 第3个 -->
		<view class="box" >
			<!-- 头部 -->
			<view class="usrinfo">
				<image class="usrimg" src="/common/Otherimages/images.jpg" mode="aspectFill"></image>
				<view class="usrname">我的小豆包</view>
			</view>
			<!-- 图片 -->
			<view class="imgbox">
				<image class="img" src="/common/goods/77.jpg" mode ="aspectFill"></image>
			</view>
			<!-- 描述 -->
			<view class="textbox">
				<view class="text">描述：有没有无人机小哥帮忙配送一下</view>
			</view>
			<!-- 尾部 -->
			<view class="end">
				<view class="money">
					8元
				</view>
				<view class="list" @click="onClick">
					接单
				</view>
			</view>
		</view>
		<!-- 第4个 11-->
		<view class="box" >
			<!-- 头部 -->
			<view class="usrinfo">
				<image class="usrimg" src="/common/usrimg/3.jpg" mode="aspectFill"></image>
				<view class="usrname">我是原生</view>
			</view>
			<!-- 图片 -->
			<view class="imgbox">
				<image class="img" src="/common/goods/4.jpg" mode ="aspectFill"></image>
			</view>
			<!-- 描述 -->
			<view class="textbox">
				<view class="text">描述：我现在有点着急拿快递，请帮我送到我家门口谢谢</view>
			</view>
			<!-- 尾部 -->
			<view class="end">
				<view class="money">
					6元
				</view>
				<view class="list" @click="onClick">
					接单
				</view>
			</view>
		</view>
		<!-- 第5个 -->
		<view class="box" >
			<!-- 头部 -->
			<view class="usrinfo">
				<image class="usrimg" src="/common/usrimg/14.jpg" mode="aspectFill"></image>
				<view class="usrname">我不玩paly</view>
			</view>
			<!-- 图片 -->
			<view class="imgbox">
				<image class="img" src="/common/goods/5.jpg" mode ="aspectFill"></image>
			</view>
			<!-- 描述 -->
			<view class="textbox">
				<view class="text">描述：我现在有点着急拿快递</view>
			</view>
			<!-- 尾部 -->
			<view class="end">
				<view class="money">
					10元
				</view>
				<view class="list" @click="onClick">
					接单
				</view>
			</view>
		</view>
		<!-- 第6个 -->
		<view class="box" >
			<!-- 头部 -->
			<view class="usrinfo">
				<image class="usrimg" src="/common/usrimg/55.jpg" mode="aspectFill"></image>
				<view class="usrname">我是村长的儿子</view>
			</view>
			<!-- 图片 -->
			<view class="imgbox">
				<image class="img" src="/common/goods/55.jpg" mode ="aspectFill"></image>
			</view>
			<!-- 描述 -->
			<view class="textbox">
				<view class="text">描述：有没有无人机的大佬帮我拿快递</view>
			</view>
			<!-- 尾部 -->
			<view class="end">
				<view class="money">
					10元
				</view>
				<view class="list" @click="onClick">
					接单
				</view>
			</view>
		</view>
		
		
		
	</view>
	<!-- 弹框 -->
	<uni-popup ref="popup" type="dialog">
		<uni-popup-dialog 
		mode="base" 
		content="你确定要选择这个接单吗" 
		message="成功消息" 
		:duration="2000" 
		:before-close="true" 
		@close="close" 
		@confirm="confirm"></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
import {ref} from "vue"
import {useUserMemberStore}from "/stores/usermember.js"
// 定义是否选择了墨单
const member=useUserMemberStore();
const popup=ref(null);

// 定义用户图片
const usrimg1="https://a.520gexing.com/uploads/allimg/2023092609/x1cry0jfh3n.jpg"
const usrimg2="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTREs8xjjeSDboZon7rhzR9nPDUU_1-__XJPlmrvRa-pV8tOE3XvbupmOaoA&s"
const usrimg3="https://p1.itc.cn/q_70/images03/20230427/97e4cf398c1c453f98f8135b202479d6.jpeg"
const usrimg4="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTthvwEiyYPgatT7BPZajLIzQAwgfvrYcUOuJmlDqfVtg&s"
const username1="小杜小杜最乖"
const username2="爱吃香菜的肉包"
const username3="你就是我的小豆包"
const username4="可惜不是你"


// 实现接单弹窗功能
const onClick=()=>{
	popup.value.open();
}
const close=()=>{
	popup.value.close();
}
const confirm=()=>{
	uni.showToast({
		title:"接单成功！",
		icon:"none"
	})
	// 将member中的member.chooseModan变true
	member.chooseModan=true
	popup.value.close();
}
</script>

<style lang="scss" scoped>
.MoDan{
	padding:70rpx 65rpx;
	
	.box{
	
		// padding-bottom: 44rpx;
		margin-bottom: 44rpx;
		width: 608rpx;
		height: 700rpx;
		background: #FFE7E7;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
		// border:1rpx solid #000;
		.usrinfo{
			width:50%;
			padding-left: 18rpx;
			padding-top: 20rpx;
			display: grid;
			grid-template-columns: 6% auto;
			
			// gap:rpx;
			.usrimg{
				width: 70rpx;
				height: 70rpx;
				border-radius:50% ;
			}
			.usrname{
				color: #000;
				text-align: center;
				font-family: "Noto Sans SC";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
		}
		// 图片
		.imgbox{
			padding:0rpx 98rpx;
			.img{
				width: 394rpx;
				height: 380rpx;
				border-radius: 19px;
				
			}
		}
		// 描述
		.textbox{
			padding:0rpx 66rpx;
			margin:22rpx 0rpx;
			.text{
				color: #000;
				// text-align: center;
				font-family: "Noto Sans SC";
				font-size: 25rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
		}
		// 尾部
		.end{
			display: flex;
			margin:0rpx 40rpx;
			padding:10rpx;
			.money{
				width: 90rpx;
				height: 50rpx;
				margin-right: 356rpx;
				border-radius: 18rpx;
				background-color: #EDCA96;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			
				
			}
			.list{
				width: 100rpx;
				height: 50rpx;
				border-radius: 18rpx;
				background-color: #C7ED96;
				display: flex;
				justify-content: center;
				lign-items: center;
				box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			}
		}
	}
}

</style>